<template>
  <div class="mb-8">
    <!-- 添加渐变效果 -->
    <div class="bg-gradient-to-b from-[#F4F8FF] to-white rounded-lg p-4">
      <div class="flex flex-row justify-between items-center mb-2">
        <span class="flex flex-row justify-between w-full">
          <div class="flex flex-row items-center">
            <h2 class="font-bold mr-2">{{ taskName }}</h2>
            <div class="flex flex-row text-xs items-center" @click="showDetail">
              详情
              <van-icon name="play" />
            </div>
          </div>
          <p
            v-if="isCompleted"
            class="text-[#52C41A] bg-[#52C41A1A] border-[1px] border-[#52C41A] rounded-md px-2 text-xs leading-[18px]"
          >
            {{ cp_completedDes }}
          </p>
          <p
            v-else
            class="text-[#FF7875] bg-[#FF78751A] border-[1px] border-[#FF7875] rounded-md px-2 text-xs leading-[18px]"
          >
            {{ cp_completedDes }}
          </p>
        </span>
      </div>
    </div>

    <div v-for="item in subTasks">
      <div class="flex flex-row items-start mb-4 pl-4">
        <div class="">
          <img
            v-if="item.status === 'complete'"
            src="@/icons/svg/minute/success_icon.svg"
          />
          <img v-else src="@/icons/svg/minute/failure_icon.svg" />
        </div>
        <p class="ml-2 text-sm">
          {{ item.subTaskName }}
        </p>
      </div>
    </div>

    <van-popup
      v-model:show="showComment"
      round
      closeable
      position="bottom"
      safe-area-inset-bottom
      safe-area-inset-top
      transition-appear
      :lock-scroll="false"
      :style="{ height: '80%' }"
      teleport="#minutesPage"
    >
      <div class="pt-8 pb-2 px-5" v-ai-tip>
        <h2 class="font-bold text-sm mb-2">{{ taskName }}</h2>
        <div class="overflow-y-auto">
          <markdown :content="comment" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import markdown from "@/components/markdown.vue";

export default {
  name: "taskCompletionCard",
  components: {
    markdown,
  },
  data() {
    return {
      showComment: false,
    };
  },
  props: {
    item: {
      typeof: Object,
    },
  },

  methods: {
    showDetail() {
      console.log("showDetail");
      this.showComment = true;
    },
  },

  computed: {
    isPass() {
      return true;
    },
    taskName() {
      return this.item.content.evaluationResults.taskName;
    },

    subTasks() {
      return this.item.content.evaluationResults.subTasks;
    },

    comment() {
      return this.item.content.evaluationResults.comment;
    },

    cp_completedTasks() {
      let subs = this.subTasks;
      console.log("subs: ", subs);
      let array = subs.filter((v) => v.status === "complete") || [];
      return array;
    },

    isCompleted() {
      return this.cp_completedTasks.length === this.subTasks.length;
    },

    cp_completedDes() {
      return `${this.cp_completedTasks.length}/${this.subTasks.length}`;
    },
  },
};
</script>

<style lang="less" scoped>
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1000;
}

:deep .mbody {
  overflow-x: hidden;

  p {
    color: #262626ff;
    line-height: 28px;
  }

  li {
    color: #262626ff;
    line-height: 28px;
    text-wrap: wrap;
  }

  ul {
    color: #262626ff;
    line-height: 28px;
    text-wrap: wrap;
  }

  code {
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: inline-block;
    width: 100%;
    white-space: pre-wrap;
    color: #262626ff;
    line-height: 28px;
  }
}
</style>
